import React, { useState } from "react";
import { Link, Route, Switch, Redirect, Prompt } from "react-router-dom";

class Home extends React.Component {
  render() {
    return (
      <>
        <div>home页面</div>
      </>
    );
  }
}

const About = () => {
  return <div>about页面</div>;
};

const Form = () => {
  const [value, setValue] = useState("");

  return (
    <>
      <div>表单页面</div>
      <input
        type="text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />

      <Prompt
        // when属性表示弹出的条件
        // when是不会自动做类型转换的
        when={!!value}
        // 弹框上面显示的文字
        message={(location) =>
          `Are you sure you want to go to ${location.pathname}`
        }
      />
    </>
  );
};

const App = () => {
  return (
    <>
      <h2>react-router-v5-阻止跳转</h2>
      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
        <li>
          <Link to="/form">表单页</Link>
        </li>
      </ul>

      <hr />

      <Switch>
        <Redirect from="/" to="/home" exact></Redirect>
        <Route path="/home" component={Home}></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/form" component={Form}></Route>
      </Switch>
    </>
  );
};

export default App;
